<script setup lang="ts">

import {ArrowLeftBold, Search } from "@element-plus/icons-vue";
import {ref} from "vue";
import {getSearchList} from "@/api/home/index";
import TheRequestWasSuccessful from "@/views/substance/theRequestWasSuccessful.vue";

const input1 = ref('')
const inputArticle = ref([])
const inputTeacher = ref([])

// 判断是否有数据
const showElement = ref(false);

// 判断是否请求到了
const showSubstance = ref(false)

function isSearch() {
    if (input1.value != '') {
        getSearchList({name: input1.value}).then(res => {
            console.log(res)
            inputArticle.value = res.data.psyArticleVos
            inputTeacher.value = res.data.psyTeacherVos
            if (inputArticle.value.length == 0 && inputTeacher.value.length == 0) {
                // 定义一个函数来设置 showElement 为 true 并等待 3 秒后设置为 false
                // console.log(inputArticle.value, inputTeacher.value)
                showElement.value = true
                showSubstance.value = false
                setTimeout(function () {
                    showElement.value = false
                }, 1000)
            } else {
                showSubstance.value = true
            }
        })
    }
}


</script>

<template>
    <div class="box">
        <div class="tit">
            <router-link to="/index">
                <el-icon class="svgIcon">
                    <ArrowLeftBold/>
                </el-icon>
            </router-link>
            <span class="titText">搜索</span>
        </div>
        <div class="searchBox">
            <el-input
                    v-model="input1"
                    style="width: 80%"
                    size="large"
                    placeholder="输入搜索内容"
                    :prefix-icon="Search"
            />
            <el-button type="primary" plain class="searchBtn" @click="isSearch">搜索</el-button>
        </div>
        <div class="substance" v-if="!showSubstance">
            <a-empty v-if="input1 == ''" class="notDate" description="暂无搜索记录"
                     image="../../src/assets/images/无数据.png"/>
            <transition name="fade">
                <el-alert title="暂无搜索信息" type="info" :closable="false" center show-icon class="feedback"
                          v-if="showElement"/>
            </transition>
        </div>
<!--        搜索后有数据显示-->
        <div class="displayDate">
            <the-request-was-successful :showSubstance="showSubstance" :inputTeacher="inputTeacher" :inputArticle="inputArticle"></the-request-was-successful>
        </div>
    </div>
</template>

<style scoped>
* {
    margin: 0;
    padding: 0;
}


.tit {
    margin-bottom: 2%;
    padding: 4%;
    border-bottom: 1px solid rgba(42, 43, 65, 0.1);
    background-color: #F5F8FB;

    .titText {
        font-size: 4vw;
    }

    .svgIcon {
        vertical-align: top;
        color: #5e5c5c;
    }
}

.searchBox {
    padding-left: 3%;

    .searchBtn {
        margin-left: 2%;
        width: 15%;
        height: 9vw;
    }
}

.substance {
    margin-top: 20%;

    .notDate {
        font-size: 4vw;
        color: #B7BCC2;
    }
}

.feedback {
    position: fixed;
    top: 40%;
    left: 15%;
    margin: auto;
    width: 66%;
    height: 12vw;
    font-size: 12%;
}

.el-alert--info.is-light {
    color: #fff;
    background-color: #85898f;
}

.fade-enter-active, .fade-leave-active {
    transition: opacity 0.5s;
}

.fade-enter-from, .fade-leave-to {
    opacity: 0;
}
</style>